<!DOCTYPE html>
<html lang="-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>航空订票系统 | 订票</title>
	<link rel="stylesheet" type="text/css" href="../admin/lib/layui-v2.5.5/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../admin/css/main.css">
	<!--加载meta IE兼容文件-->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="header">
	<div class="menu-btn">
		<div class="menu"></div>
	</div>
	<h1 class="logo">
		<a href="../index.html">
			<span>航空订票系统</span>
			<img src="../admin/images/favicon.ico" height="60px">
		</a>
	</h1>
	<div class="nav">
		<a href="../index.html" class="active">航班查询</a>
		<a href="../about.html">关于</a>
	</div>
	<ul class="layui-nav header-down-nav">
		<li class="layui-nav-item"><a href="../index.html" class="active">航班查询</a></li>
		<li class="layui-nav-item"><a href="../about.html">关于</a></li>
	</ul>
	<p class="welcome-text">
		<span id="username"><a style="color: #1295D8" href="../login.html">登录</a></span>
	</p>
</div>

<div class="banner">
	<div class="cont w1000" style="padding-top: 30px;">
		<form class="layui-form layui-form-pane" onsubmit="return false">
			<div class="layui-card" style="max-width: 672px;margin: 0 auto;">
				<div class="layui-card-header">订票 - 请填写以下乘客信息</div>
				<div class="layui-card-body">
					<div id="one">
						<script type="text/html" id="formTpl">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">身份证号码</label>
									<div class="layui-input-inline">
										<input lay-verify="identity" name="id{{d.num}}" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">姓名</label>
									<div class="layui-input-inline">
										<input lay-verify="required" name="name{{d.num}}" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">手机号码</label>
									<div class="layui-input-inline">
										<input lay-verify="phone" name="phone{{d.num}}" autocomplete="off" class="layui-input">
									</div>
								</div>

							</div>
							<hr>
						</script>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">
								<span id="addOne" class="layui-btn layui-btn-sm"><i style="font-size: 24px;" class="layui-icon layui-icon-addition"></i>添加一个乘客</span>
							</div>
						</div>
						<div style="margin: 0 auto;width: 30px;">
							<button class="layui-btn admin-button layui-btn-normal" lay-submit lay-filter="nextOne"> 下一步 </button>
						</div>
					</div>
				</div>
			</div>

		</form>
	</div>
</div>

<script type="text/html" id="orderTpl">
	<table class="layui-table">
		<thead>
		<tr>
			<th>身份证号码</th>
			<th>机票号</th>
			<th>机场建设费</th>
			<th>保险费</th>
			<th>总费用</th>
			<th>餐食类型</th>
		</tr>
		</thead>
		<tbody>
		{{#  layui.each(d.airTickets, function(index, a){ }}
		<tr>
			<td>{{a.passenger_id}}</td>
			<td>{{a.id}}</td>
			<td>{{a.construction_costs}}</td>
			<td>{{a.insurance_costs}}</td>
			<td>{{a.total_costs}}</td>
			<td>{{a.meal_type}}</td>
		</tr>
		{{#  }); }}
		<tr><td colspan="6" >总计: ￥{{d.all_costs}}</td></tr>
		<tr><td colspan="6" style="text-align: center;">
			<span id="payOrder" class="layui-btn layui-btn-danger"> 支 付 </span>
		</td></tr>
		</tbody>
	</table>
</script>
<div class="footer-wrap" style="text-align: center;padding: 20px;color: #858796;font-size: 18px;">
	<span style="">Copyright ©  2021</span>
</div>
<script type="text/javascript" src="../admin/lib/layui-v2.5.5/layui.js"></script>
<script type="text/javascript">
	layui.config({
		base: '../admin/js/util/'
	}).use(['element', 'laytpl', 'jquery', 'menu', 'form'], function () {
		var element = layui.element,
			laytpl = layui.laytpl,
			form = layui.form,
			$ = layui.$,
			menu = layui.menu;

		function getQuery() {
			const url = decodeURI(location.search); // 获取url中"?"符后的字串(包括问号)
			let query = {};
			if (url.indexOf("?") != -1) {       // 判断是否带请求参数
				const str = url.substr(1);      // 去除url中的?
				const pairs = str.split("&");   // 以&分割各个参数
				for(let i = 0; i < pairs.length; i ++) {
					const pair = pairs[i].split("="); // 以 = 分割 key和 value
					query[pair[0]] = pair[1];
				}
			}
			return query ;  // 返回请求参数对象
		}
		var param = getQuery();

		menu.init();
		var tplnum = 0;

		function addTpl(){
			laytpl(formTpl.innerHTML).render({num: tplnum}, function(html){
				$("#one").append(html);
				tplnum++;
			});
		}
		addTpl();
		$('#addOne').click(function () {
			addTpl();
		});

		var orderId;
		form.on('submit(nextOne)', function (data) {
			var field = data.field;
			field['tid'] = param.tid;
			field['num'] = tplnum;
			console.log(field);
			$.ajax({
				url: "/api/book1",
				data: field,
				type: "POST",
				dataType: "json",
				success: function (res) {
					if (res.code == 0) {
						layer.msg('提交成功');
						orderId = res.data.order_id;
						laytpl(orderTpl.innerHTML).render(res.data, function(html){
							var index = layer.open({
								title: '确认订单',
								type: 1,
								shade: 0.2,
								maxmin: true,
								shadeClose: true,
								area: ['600px', '300px'],
								content: html,
							});
							$("#payOrder").click(function () {
								$.ajax({
									url: "/api/doPay/" + orderId,	// ** url
									type: "PUT",
									dataType: "json",
									success: function (res) {
										layer.closeAll();
										if (res.code == 0) {
											layer.alert('支付成功！', {icon: 1}, function(index){
												window.location='../'
												layer.close(index);
											});
										} else {
											layer.msg(res.msg);
										}
									}
								});
							})
						});
					} else {
						layer.msg(res.msg, {icon: 2, time: 2000});
					}
				},
			});
		});


	})
</script>
</body>
</html>
